<template>
  <el-scrollbar class="pro">
    <div class="title">{{ $props.problem.title }}</div>
    <div class="pro-msg">
      <div class="item">
        <span>难度：</span>
        <n-tag round size="tiny" type="success" v-show="$props.problem.difficulty === 0">简单</n-tag>
        <n-tag round size="tiny" type="warning" v-show="$props.problem.difficulty === 1">中等</n-tag>
        <n-tag round size="tiny" type="error" v-show="$props.problem.difficulty === 2">困难</n-tag>
      </div>
      <el-tooltip :content="`时间限制：C/C++ ${problem.timeLimit}秒，其他语言 ${problem.timeLimit * 2
        }秒`" placement="top">
        <div class="item">
          <span><i class="iconfont icon-dengdaizhong"></i>时间限制：{{
            $props.problem.timeLimit
          }}MS</span>
        </div>
      </el-tooltip>
      <el-tooltip :content="`空间限制：C/C++ ${$props.problem.memoryLimit}M，其他语言 ${$props.problem.memoryLimit * 2
        }M`" placement="top">
        <div class="item">
          <span><i class="iconfont icon-cpu"></i>内存限制：{{
            $props.problem.memoryLimit
          }}MB</span>
        </div>
      </el-tooltip>
      <div class="item">
        <span><i class="iconfont icon-zuozhe"></i>作者：{{ $props.problem.author }}</span>
      </div>
    </div>
    <div class="description">
      <div class="d-item">
        <span class="d-i-title">题目描述</span>
        <div class="d-i-contain">
          <v-md-editor class="d-container" :mode="'preview'" v-model="$props.problem.description"
            :before-preview-change="beforeChange"></v-md-editor>
        </div>
      </div>
      <div class="d-item">
        <span class="d-i-title">输入描述</span>
        <div class="d-i-contain">
          <v-md-editor class="d-container" :mode="'preview'" v-model="$props.problem.inputDes"
            :before-preview-change="beforeChange"></v-md-editor>
        </div>
      </div>
      <div class="d-item">
        <span class="d-i-title">输出描述</span>
        <div class="d-i-contain">
          <v-md-editor class="d-container" :mode="'preview'" v-model="$props.problem.outputDes"
            :before-preview-change="beforeChange"></v-md-editor>
        </div>
      </div>
      <div class="d-item">
        <span class="d-i-title">提示</span>
        <div class="d-i-contain">
          <v-md-editor class="d-container" :mode="'preview'" v-model="$props.problem.hint"
            :before-preview-change="beforeChange"></v-md-editor>
        </div>
      </div>
      <div class="d-item" v-for="(item, index) in $props.problem.examples.input" :key="item">
        <span class="d-i-title">用例{{ index + 1 }}</span>
        <div class="examples">
          <el-scrollbar>
            <div class="example">
              <div class="e-left">
                <div class="e-l-l">
                  <div class="tip">输入：</div>
                </div>
                <div class="e-l-m">
                  <span>{{ item }}</span>
                </div>
                <div class="e-l-r">
                  <i class="iconfont icon-fuzhi" @click="copy(item)"></i>
                </div>
              </div>
              <div class="e-right">
                <div class="e-r-l">
                  <div class="tip">输出：</div>
                </div>
                <div class="e-r-m">
                  <span>{{ problem.examples.output[index] }}</span>
                </div>
                <div class="e-r-r">
                  <i class="iconfont icon-fuzhi" @click="copy($props.problem.examples.output[index])"></i>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import useClipboard from "vue-clipboard3"
import { ElMessage } from "element-plus"
import { beforeChange } from "@/utils/global.js"

export default {
  data () {
    return {
      value: "",
    }
  },
  props: ["problem"],
  mounted () {

  },
  methods: {
    // 新增 beforeChange 方法
    beforeChange (...args) {
      // 如果需要保持原函数的 this 上下文，可以使用 call/apply
      return beforeChange.apply(this, args)
      // 或者直接调用（如果不需要 this 绑定）
      // return beforeChange(...args);
    },
    async copy (msg) {
      const { toClipboard } = useClipboard()
      try {
        // 复制
        await toClipboard(msg)
        ElMessage.success("复制成功")
        // 复制成功
      } catch (e) {
        // 复制失败
        console.log(e)
        ElMessage.error("浏览器不支持自动复制")
      }
    },
  },
}
</script>

<style lang="less" scoped>
.pro {
  width: 100%;

  .title {
    margin-top: 2vh;
    font-size: 1.4rem;
    font-weight: 550;
    letter-spacing: 0.1vw;
  }

  .pro-msg {
    display: flex;
    padding: 0 1vw;
    margin: 1vh 0;

    .item {
      margin: auto 1.5vw auto 0;
      cursor: pointer;

      .iconfont {
        font-size: 0.8rem;
        margin: auto 1px;
      }

      span {
        color: #888;
        font-size: 0.8rem;
      }
    }
  }

  .description {
    display: flex;
    flex-direction: column;

    .d-item {
      margin: 1vh 0;

      .d-i-title {
        font-size: 16px;
        font-weight: 550;
        color: @lineColor;
        border-left: 3px solid @lineColor;
        padding-left: 1%;
        color: #000;
      }

      .d-i-contain {
        width: 92%;
        min-height: 50px;
        padding: 5px 3%;
        white-space: pre-wrap;
        word-break: keep-all;
      }

      .examples {
        background-color: rgb(247, 248, 249);
        border-radius: 0.5vw;
        width: 92%;
        min-height: 10vh;
        max-height: 25vh;
        margin: 1.5vh 0 0.5vh 0;
        overflow: hidden;
        padding: 1vh;
        color: #666;

        .example {
          display: flex;
          position: relative;

          .iconfont {
            cursor: pointer;
            position: sticky;
            top: 1vh;
          }

          .tip {
            position: sticky;
            top: 0;
          }

          .e-left {
            width: 50%;
            min-height: 10vh;
            max-height: 25vh;
            display: flex;

            .e-l-l {
              width: 15%;
            }

            .e-l-m {
              width: 75%;

              span {
                white-space: pre-wrap;
              }
            }

            .e-l-r {
              width: 10%;
            }
          }

          .e-right {
            width: 50%;
            min-height: 10vh;
            max-height: 25vh;
            display: flex;

            .e-r-l {
              width: 15%;
            }

            .e-r-m {
              width: 75%;

              span {
                white-space: pre-wrap;
              }
            }

            .e-r-r {
              width: 10%;
            }
          }
        }
      }
    }
  }
}

::v-deep(.github-markdown-body) {
  padding: 8px 16px;

  p {
    margin-bottom: 0;
  }
}

::v-deep(.scrollbar__bar.is-horizontal) {
  height: 0;
  left: 0;
}
</style>
